/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from 'react';
import {
  Space,
  Row,
  Col,
  Card,
  Image,
  Typography,
  Pagination,
  Divider,
  Tag,
  List,
  Table,
  Button,
  Input,
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { Line } from '@ant-design/charts';
import { request } from 'umi';
import { values } from 'lodash';

import { tim, genTestUserSig } from "./gensig";

import TIM from "tim-js-sdk";
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
import TIMUploadPlugin from "tim-upload-plugin";

const { Title } = Typography;
const { Search } = Input;

const index: React.FC = () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  const [data2, setData] = useState('');

  useEffect(() => {
    let id = 'czh';
    let sig = genTestUserSig(id).userSig;
    tim.login({ userID: id, userSig: sig });
  }, []);

  const onSearch = (value) => {
    console.log(value);
  };

  return (
    <PageContainer>
      <Space style={{ marginBottom: 16 }}>
        <Search
          placeholder="input search text"
          allowClear
          enterButton="Search"
          onSearch={onSearch}
        />
        <Button>Clear filters</Button>
        <Button>Clear filters and sorters</Button>
      </Space>
      <Table columns={columns} dataSource={data} />
    </PageContainer>
  );
};

export default index;
